<template xmlns="http://www.w3.org/1999/html">
  <div style="background-color: #ebeeea; width: 100%">
    <div style="width: 100%; background-color: #ebeeea">
      <el-container>
        <el-header style="height: 80px; width: 100%">
          <div style="width: 100%; height: 100%">
            <!-- logo -->
            <div style="width: 10%; height: 100%; float: left">
              <img
                src="../assets/img/LOGO.png"
                style="width: 120px; height: 100%; margin-top: 2px"
              />
            </div>

            <!-- 搜索框 -->
            <div style="width: 45%; height: 100%; float: left">
              <div style="margin-top: 15px; width: 70%; margin-left: 20%">
                <el-input
                  placeholder="请输入内容"
                  v-model="input5"
                  class="input-with-select"
                  @keyup.enter.native="searchh"
                >
                  <el-select
                    v-model="select"
                    slot="prepend"
                    placeholder="请选择"
                  >
                    <el-option label="项目" value="1"></el-option>
                    <el-option label="工作室" value="2"></el-option>
                    <el-option label="招聘" value="3"></el-option>
                  </el-select>
                  <el-button
                    slot="append"
                    icon="el-icon-search"
                    style="background-color: #409eff"
                    @click="searchh()"
                  ></el-button>
                </el-input>
              </div>
            </div>

            <!-- 登录状态 -->
            <div
              style="width: 10%; height: 100%; float: left; margin-top: 18px"
            >
              <el-menu
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
                background-color="#f5f5f5"
              >
                <!-- 已登录 -->
                <el-submenu index="2" v-if="login">
                  <template slot="title"
                    ><el-avatar :src="circleUrl"></el-avatar
                    >{{ username }}</template
                  >

                  <el-menu-item index="2-1">{{ username }}</el-menu-item>
                  <el-menu-item index="2-2">选项2</el-menu-item>
                  <el-menu-item index="2-3" @click="loginOut"
                    >退出登录</el-menu-item
                  >
                </el-submenu>
              </el-menu>
            </div>
          </div>
        </el-header>

        <!-- 展示界面 -->
        <el-main style="height: 600px; width: 80%; margin-left: 10%">
          <div style="border: 1px; width: 99%; border-color: black">
            <ul
              class="infinite-list"
              v-infinite-scroll="load"
              style="overflow: auto"
            >
              <li
                v-for="i in tableData"
                class="infinite-list-item"
                v-if="type == '项目'"
              >
                <div
                  style="
                    background-color: pink;
                    width: 80%;
                    height: 250px;
                    margin-left: 10%;
                    margin-top: 10px;
                  "
                >
                  <span>需求属性：{{ i.lable }}</span
                  ><br />
                  <span>预算金额：{{ i.money }}</span
                  ><br />
                  <span>具体描述：{{ i.description }}</span>
                  <br />
                  <el-button type="primary" @click="applyDemand(i)"
                    >申请该项目</el-button
                  >
                </div>
              </li>

              <!-- 工作室搜索 -->
              <li
                v-for="i in tableData"
                class="infinite-list-item"
                v-if="type == '工作室'"
              >
                <div
                  style="
                    background-color: pink;
                    width: 80%;
                    height: 250px;
                    margin-left: 10%;
                    margin-top: 10px;
                  "
                >
                  <span>工作室属性：{{ i.lable }}</span
                  ><br />
                  <span>预算金额：{{ i.money }}</span
                  ><br />
                  <span>具体描述：{{ i.description }}</span>
                  <br />
                  <el-button type="primary" @click="applyDemand(i)"
                    >申请该项目</el-button
                  >
                </div>
              </li>
            </ul>
          </div>
        </el-main>

        <el-footer>
          <el-pagination
            background
            layout="prev, pager, next"
            :total="100"
          ></el-pagination>
        </el-footer>
      </el-container>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      type: "", //搜索的类型
      //项目的信息
      tableData: [
        { id: "", lable: "", money: "", status: "", description: "" },
      ],
    };
  },
  mounted: function () {
    let user = JSON.parse(window.sessionStorage.getItem("user"));
    this.type = this.$route.query.type;
    //展示所有带关键词的项目
    if (this.type == "项目") {
      let mallCode = this.$route.query.mallCode;
      axios
        .get("http://localhost:88/provider/search/demand", {
          params: { lable: mallCode },
        })
        .then((response) => {
          let res = [];
          for (let i = 0; i < response.data.length; i++) {
            let tmp = {};
            tmp.lable = response.data[i].lable;
            tmp.money = response.data[i].money;
            tmp.status = response.data[i].status;
            tmp.description = response.data[i].description;
            tmp.id = response.data[i].id; //需求id
            tmp.companyId = response.data[i].companyId;
            res[i] = tmp;
          }
          this.tableData = res;
        });
    }

    // 搜索工作室
    else if (this.type == "工作室") {
      let mallCode = this.$route.query.mallCode;
      axios
        .get("http://localhost:88/provider/search/demand", {
          params: { lable: mallCode },
        })
        .then((response) => {
          let res = [];
          for (let i = 0; i < response.data.length; i++) {
            let tmp = {};
            tmp.lable = response.data[i].lable;
            tmp.money = response.data[i].money;
            tmp.status = response.data[i].status;
            tmp.description = response.data[i].description;
            tmp.id = response.data[i].id; //需求id
            tmp.companyId = response.data[i].companyId;
            res[i] = tmp;
          }
          this.tableData = res;
        });
    }
  },
  methods: {
    //申请项目
    applyDemand(demand) {
      let rid = this.$route.query.rid;
      axios
        .post("http://localhost:88/provider/workroom/applyDemand", {
          workroomId: rid,
          groupId: demand.id, //需求id
          companyId: demand.companyId,
          money: demand.money,
          states: demand.status,
        })
        .then((response) => {
          this.$message({
            message: "申请成功",
            type: "success",
          });
          this.$router.replace({ path: "/Index" });
        });
    },

    jump(path) {
      this.$router.replace({ path: path });
    },

    search(index) {
      var e;
      var w = 1;
      if (this.value4 == true) {
        e = "项目";
      } else {
        e = "工作室";
      }
      this.$router.push({
        path: "/Search",
        query: {
          mallCode: index,
          mallCode2: e,
          mallCode3: w,
        },
      });
    },
    searchh() {
      var e;
      var w = 2;
      if (this.select == "1") {
        e = "项目";
      } else {
        e = "工作室";
      }
      if (e == "") {
        this.$notify({
          title: "警告",
          message: "请选择搜索类型",
          type: "warning",
          duration: 2000,
        });
      }
      this.$router.push({
        path: "/Search",
        query: {
          mallCode: this.input5,
          mallCode2: e,
          mallCode3: w,
        },
      });
      location.reload();
    },
    Home() {
      var user = JSON.parse(window.sessionStorage.getItem("user"));
      if (user == null || user == "") {
        this.$router.replace("/Login");
      } else {
        var role = user.role;

        if (role === "admin") {
          this.$router.replace("/AdminHome");
        } else {
          this.$router.replace("/Home");
        }
      }
    },
  },
};
</script>
<style>
.el-header,
.el-footer {
  background-color: whitesmoke;
  color: #fff;
  text-align: center;
  line-height: 60px;
}
.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;

  padding: 0px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
body > .el-container {
  margin-bottom: 10px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 100px;
}
.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.el-select .el-input {
  width: 130px;
}
.time {
  font-size: 13px;
  color: #999;
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
}
.button {
  padding: 0;
  float: right;
}
.image {
  width: 100%;
  display: block;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
body > .el-container {
  margin-bottom: 10px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.el-select .el-input {
  width: 130px;
}
</style>
